/**
* Module: 
* Description: 商品管理
* Author: xsq
* Date: 2023/05/03 14:25:30
* LastEditAuthor: xsq
* LastEditTime: 2023/05/03 14:25:30
*/
<template>
  <div class="content">
    <div class="breadcrumb">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="search">
      <el-form ref="ruleFormRef" :inline="true" :model="queryParams.params" :rules="rules" class="demo-form-inline">
        <el-form-item label="标题" prop="title">
          <el-input v-model="queryParams.params.title" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            搜索
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="operation">
      <el-button type="primary" @click="addHandle" v-auth="'news:add'">添加文章</el-button>
    </div>

    <el-table class="table-box" :data="tableData" stripe style="width: 100%" table-layout="fixed">
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="create_time" label="创建时间">
        <template #default="scope">
          {{ formatTime(new Date(scope.row.create_time * 1000), 'y-m-d h:i:s') }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template #default="scope">
          <el-button text type="primary" size="small" @click="editHandle(scope.row)" v-auth="'news:edit'">
            编辑
          </el-button>
          <el-button text type="primary" size="small" @click="delHandle(scope.row)" v-auth="'news:del'">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="total" :key="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getTableData" :total="total" :pageSizes="[1, 10, 20, 30]"></Pagination>
  </div>
</template>

<script setup lang="ts">
import config from '/@/config/index';
import { reactive, ref, unref, getCurrentInstance } from 'vue';
import { useTableList } from '/@/hooks/useTable';
import { Pagination } from '/@/components/Pagination/index';
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { useRouter } from 'vue-router';
import { formatTime, getSession } from '/@/utils/index';

const { proxy }: any = getCurrentInstance();
const tableData: any[] = reactive([]);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  params: {
    title: '',
  }
});
const total = ref(0);

const router = useRouter();

// 添加
const addHandle = () => {
  return router.push({
    path: '/news/add'
  });
};

// NOTE:编辑
const editHandle = (rows) => {
  return router.push({
    path: '/news/add',
    query: {
      id: rows.id
    }
  });
};

// NOTE:删除
const delHandle = (rows) => {
  const id = rows.id;
  ElMessageBox.confirm('确定是否删除?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const res = await proxy.$http.deleteNewsById({ id });

    if (res.code == config.SUCCESS_CODE) {
      ElMessage({
        message: '操作成功！',
        type: 'success',
      });
      getTableData();
    }
  });
}

// 查询列表数据
const getTableData = () => {
  useTableList(proxy.$http.getNewsList, queryParams, res => {
    tableData.length = 0;
    tableData.push(...res.tableData);
    total.value = unref(res.total);
  });
};

const rules = reactive<FormRules>({});
const ruleFormRef = ref<FormInstance>();

// 重置
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 提交搜索表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      getTableData();
    }
  });
};

const init = () => {
  getTableData();
};

init();
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  width: 100%;
  .operation {
    margin: 10px 0;
  }
  .el-breadcrumb {
    margin-bottom: 15px;
  }
}
</style>